import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { authClient } from "@/lib/auth-client";
import { useNavigate } from "@tanstack/react-router";
import { Button } from "./ui/button";
import { useQuery } from "convex/react";
import { api } from "@{{projectName}}/backend/convex/_generated/api";

export default function UserMenu() {
    const navigate = useNavigate();
    const user = useQuery(api.auth.getCurrentUser)

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline">{user?.name}</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="bg-card">
                <DropdownMenuLabel>My Account</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>{user?.email}</DropdownMenuItem>
                <DropdownMenuItem asChild>
                    <Button
                        variant="destructive"
                        className="w-full"
                        onClick={() => {
                            authClient.signOut({
                                fetchOptions: {
                                    onSuccess: () => {
                                        navigate({
                                            to: "/dashboard",
                                        });
                                    },
                                },
                            });
                        }}
                    >
                        Sign Out
                    </Button>
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}
